<template>
  <div id="map" class="map"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { watch } from 'vue';
import china from '@/data/data.json'

const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
})

watch(() => props.data, (newVal) => {
  if ((props.data as ISaleMapModel[]).length === 0) return;
  const dom = document.getElementById('map')!;
  const myCharts = echarts.init(dom)
  type EChartsOption = echarts.EChartsOption;
  // 实现地图，一定要使用一个json数据，需要先注册该地图
  echarts.registerMap('china', china as any);

  const data = (newVal as ISaleMapModel[]).map(item => ({ name: item.areaName, value: item.saleNum }))!;

  const option: EChartsOption = {
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: "{b}<br /> 销量: {c}",
      backgroundColor: 'rgba(0,0,0,.3)',
      textStyle: {
        color: '#fff'
      }
    },
    series: {
      type: "map",
      map: "china",
      data,
      emphasis: {
        label: {
          show: false,
        }
      },
      itemStyle: {
        borderColor: '#fff',
        areaColor: 'red'
      }
    },
    visualMap: [{
      type: 'continuous',
      min: 0,
      max: 1000000,
      calculable: true,
      inRange: {
        color: ["#FFFFFF", "#FA8072", "#FF4500", "#A52A2A"],
        symbolSize: [30, 100]
      }
    }]
  }

  myCharts.setOption(option);
}
);

</script>
 
<style lang="less" scoped>
.map {
  width: 100%;
  height: 700px;
}
</style>